<template>
	<div class="group">
		<el-form>
			<el-row>
				<el-col :span="6"  style="margin-right: 14px">
					<el-form-item label="名称">
						<el-input v-model="groupForm.name" placeholder="请输入组织名称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" >
					<el-button  icon="refresh">重置</el-button>
					<el-button type="primary" icon="search">搜索</el-button>
					<el-button type="primary" icon="plus" @click="openAddDialog">添加</el-button>
				</el-col>
			</el-row>
		</el-form>

		<el-table :data="groupList" border>

			<el-table-column>
				<template #default="scope">
					<template v-if="scope.row.isEditing">
						<el-button size="small" type="success" icon="check" @click="saveEdit(scope.row)">保存</el-button>
						<el-button size="small" icon="close" @click="cancelEdit(scope.row)">取消</el-button>
					</template>
					<template v-else>
						<el-button size="small" type="primary" icon="edit" @click="enterEditMode(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" icon="delete" @click="deleteHandel(scope.row)">删除</el-button>
					</template>
				</template>
			</el-table-column>
		</el-table>

		<div style="margin-top: 8px; display: flex; justify-content: flex-end;">
			<el-pagination background layout="prev, pager, next" :total="total" @current-change="pageChange"/>
		</div>


		<el-dialog v-model="dialogVisible" :title="groupEditRow.id ? '编辑组织信息' : '添加组织'">
			<el-form>
				<el-row>
					<el-col :span="12">
						<el-form-item label="名称">
							<el-input v-model="groupEditRow.name" placeholder="请输入组织名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="上级组织">
							<el-select placeholder="请选择上级" v-model="groupEditRow.praent">
								<el-option :value="0" label="根目录"/>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

			</el-form>
		</el-dialog>
	</div>
</template>
<script setup>
import {ref, reactive} from 'vue'
import {getGroupList, addGroup, deleteGruop} from '/@/api/admin'
import {ElMessage, ElMessageBox} from "element-plus";
const groupForm = reactive({
	page: 1,
	pageSize: 10,
	name: ''
})
const groupList = ref([])
const total = ref(0)
const getList = async ()=> {
	const res = await getGroupList(groupForm)
	groupList.value = res.data.list.map(item => {
		return {
			...item,
			isEditing: false,
			editingData: null
		}
	})
	total.value = res.data.total
}
getList()

const pageChange = page => {
	groupForm.page = page
	getList()
}

const dialogVisible = ref(false)
const groupEditRow = ref({})
const openAddDialog = ()=> {
	dialogVisible.value = true
}

const saveEdit = row => {

}
const cancelEdit = row => {
	row.isEditing = false
}
const enterEditMode = row => {

}
const deleteHandel = row => {
	ElMessageBox.confirm(
		'确认删除该组织及附属组织吗?',
		'Warning',
		{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}
	).then(async() => {
		const res = await deleteGruop(row.id)
		ElMessage({
			type: res.code == 200 ? 'success' : 'error',
			message: res.msg,
			duration: 2000
		})
		getList()
	})
}
</script>
<style scoped lang="scss">
.group{

}
</style>